<template>
  <!-- 大好河山 -->
  <div class="yjgl">
    <div class="h2">游记攻略</div>
    <ul class="nav">
      <li>全部</li>
      <li>最新</li>
      <li>最热</li>
    </ul>
    <!-- 游记攻略详情 -->
    <Yjgldetail></Yjgldetail>
  </div>
</template>

<script>
import Yjgldetail from '../yjgldetail/yjgldetail'
export default {
    components:{
        Yjgldetail
    }
};
</script>

<style>
.yjgl {
  width: 1200px;
  height: 1000px;
  margin-bottom: 105px;
  /* background-color: sienna; */
  margin: 0 auto;
}
.yjgl .h2 {
  font-size: 50px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  text-align: center;
  margin: 105px auto 31px;
}
.yjgl .nav {
  width: 450px;
  height: 42px;
  /* background: teal; */
  display: flex;
  justify-content: space-between;
  margin-bottom: 54px;
}
.yjgl .nav li {
  width: 142px;
  height: 42px;
  background: #ffeae8;
  opacity: 0.73;
  border-radius: 21px;
  text-align: center;
  line-height: 42px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
}
.yjgl .nav li:hover {
  color: #d1524e;
}
</style>